<template>
  <div class="login">
    <div class="loginContainer">
      <h2 class="title">康恒医院管理系统登录</h2>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item>
          <el-input v-model.trim="form.name" placeholder="用户名或身份证" @keyup.enter.native="nextInput"></el-input>
        </el-form-item>
		<img src="../introduction/而__.png" style="height: 100px; width: 100px; position: fixed; left: 970px; top: 250px;"/>
        <el-form-item @keyup.enter.native="_login">
          <el-input id="psw" v-model="form.password" type="password" class="inputpsw" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="_login">登录</el-button>
        </el-form-item>
      </el-form>
      <p class="tips">本系统有六个测试的用户账号为root、doctor、nurse、user、pharmacist、pharmacy，
        密码为各自用户名，例如root用户的密码为root。其中最高权限是root用户 </p>
    </div>
  </div>
</template>

<script>
  import {
    mapActions
  } from 'vuex'; // 引入vuex中各个模块的actions

  import {
    api
  } from '../../global/api.js';
  import axios from 'axios';
  import {
    t
  } from 'element-ui/lib/locale/index.js';
  export default {
    name: 'login',
    data() {
      return {
        tips: '',
        form: {
          name: '',
          password: '',
          type: ''
        },
        user: ''
      };
    },
    methods: {
      // ...mapActions({setUserInfo: 'setUserInfo'}),  // 本组件注册VUEX输出的actions中的setUserInfo方法
      // 用户登录验证不能为空
      _login() {
        // 获取所有的用户信息
        let self = this

        let apilogin = "http://localhost:8088/userlogin"
        this.$http.get(apilogin, {
          params: this.form
        }).then((response) => {
          if (response.body.code == 200) {
            console.log(response.body.data)
            sessionStorage.setItem("easeHis", response.body.data.userlogin.name)
            sessionStorage.setItem("easeHisType", response.body.data.userlogin.type)
            self.$router.push({
              path: 'home'
            });

          } else {
            this.$message({
              message: '登录出错',
              type: 'error'
            });
          }


        }, response => {
          this.$message({
            message: '数据请求失败',
            type: 'error'
          });
        });

      }
      // 用户名文本框回车跳到密码文本框
      // nextInput () {
      //   document.querySelector('#psw input').focus();
      // }
    }
  };
</script>

<!-- lang="stylus-loader" rel="stylesheet/stylus" -->
<style lang="stylus-loader" rel="stylesheet/stylus">
  .login
    .loginContainer
      max-width:500px
      margin: 90px auto 0 auto
      background-color:#48576a
      padding:25px 30px
      border-radius: 20px
      .title
        font-size: 35px
        text-align: center
        color: rgb(255,255,255)
        font-weight: 900
        margin-bottom: 40px
        padding: 20px 0 10px 0
        letter-spacing: 4px
    .el-form-item__content
      margin-right: 80px
    .el-button
      width:100%
    .tips
      color:#fff
      font-size:12px
      text-indent:2em
    .el-input
      input
        background-color: rgba(0,0,0,0.1)
        color: #fff
</style>